<template>
   
  <div id="abc">
        <span>{{ counter }}</span>     <button @click="onAdd">+1</button>  
  </div>
</template>

<script>
// let timer = null
function onClick() {
  console.log("click");
}
export default {
  //   beforeCreate() {
  //     console.log("创建前", this.msg);
  //   },
  //   created() {
  //     // console.log("创建后", this.msg);
  //     timer = setInterval(() => {
  //         console.log(1);
  //     },1000)
  //   },
  //   beforeMount() {
  //     console.log("挂载前", document.querySelector("#abc"));
  //   },
  mounted() {
    // 页面初始化的时候 操作DOM
    // console.log("挂载后", document.querySelector("#abc"));
    document.addEventListener("click", onClick);
  },
  //   beforeUpdate() {
  //     console.log("更新前", document.querySelector("#abc span").innerText);
  //   },
  //   updated() {
  //     console.log("更新后", document.querySelector("#abc span").innerText);
  //   },
  beforeDestroy() {
    // 清空定时器
    // clearInterval(timer)
    // 清除闭包
    // 清除事件监听(document, window)
    document.removeEventListener("click", onClick); // console.log('销毁前', document.querySelector("#abc"));
  },
  //   destroyed() {
  //     console.log('销毁后', document.querySelector("#abc"));
  //   },
  data() {
    return {
      msg: "hello world",
      counter: 1,
    };
  },
  methods: {
    onAdd() {
      this.counter++;
    },
  },
};
</script>

<style>
</style>
